<template>
    <div class="main-con horsemanDeliveryData">
        <!-- 搜索框 -->
        <div class="search-con">
            <div class="search-item">
                <div class="search-item-title">门店名称</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="formData.storeName" placeholder="请输入门店名称" @change="handleSearch"></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">骑手名称</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="formData.courier" placeholder="请输入骑手名称" @change="handleSearch"></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">承运商</div>
                <div class="search-item-input">
                    <el-select size="mini" v-model="formData.deliverytype" placeholder="请选择承运商" @change="handleSearch">
                        <el-option v-for="item in deliveryType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">订单时间</div>
                <div class="search-item-input">
                    <el-date-picker size="mini" :editable="false" class="w200" v-model="formData.beginTime" type="datetime"
                        placeholder="请选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" :clearable="false"></el-date-picker>
                </div>
                <div>~</div>
                <div class="search-item-input">
                    <el-date-picker size="mini" :editable="false" class="w200" v-model="formData.endTime" type="datetime"
                        placeholder="请选择结束时间" value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59" :clearable="false"></el-date-picker>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title"></div>
                <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                <el-button size="mini" type="primary" icon="el-icon-delete" @click="handleClear">清空</el-button>
            </div>
        </div>

        <!-- 按钮组 -->
        <div class="btn-group-con">
            <el-button size="mini" type="primary" @click="handleExport">导出</el-button>
        </div>

        <!-- 表格数据 -->
        <div class="table-con" v-loading="loading">
            <el-table :data="tableData" size="mini" :header-cell-style="{background:'#f8f8f8'}" style="width: 100%">
                <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="storeName" label="门店名称" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="createTime" label="订单日期" width="90" align="center">
                </el-table-column>
                <el-table-column prop="orderNo" label="订单号" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="payTime" label="下单时间" width="90" align="center">
                </el-table-column>
                <el-table-column label="分拣时间" width="90" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.sortedTime}}</div>
                        <div>{{scope.row.sortName}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="totalSortTime" label="分拣时长" width="" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div>{{timeTransform(scope.row.totalSortTime)}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="deliveryTypeDesc" label="承运商" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="weight" label="重量(kg)" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="expressFee" label="运费" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="consignTime" label="取货时间" width="90" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.consignTime}}</div>
                        <div>{{scope.row.courier}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="horsemanConsignTime" label="实际送达时间" width="95" align="center">
                </el-table-column>
                <el-table-column prop="totalDeliveryTime" label="配送时长" width="" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div>{{timeTransform(scope.row.totalDeliveryTime)}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="totalTime" label="订单总时长" width="" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div>{{timeTransform(scope.row.totalTime)}}</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 表格分页 -->
        <div class="pagination-con">
            <m-pagination :currentPage="formData.pageNum" :pageSize="formData.pageSize" :total="total"
                @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
            </m-pagination>
        </div>
    </div>
</template>

<script>
import { queryHorsemanDeliveryDataInfo } from "@/common/service/statisticsManagement/horsemanDeliveryData.js";
import mPagination from "@/components/m-pagination/m-pagination";
import { api } from "@/common/http/index.js";
export default {
    name: "horsemanDeliveryData",
    data() {
        return {
            // 搜索条件
            formData: {
                storeName: "", //门店名称
                courier: "", //骑手名称
                deliverytype: "", //承运商
                beginTime: "", //订单时间开始时间
                endTime: "", //订单时间结束时间
                pageNum: 1,
                pageSize: 10
            },
            deliveryType: [
                {
                    value: "",
                    label: "全部"
                },
                {
                    value: "0",
                    label: "自有骑手"
                },
                {
                    value: "1",
                    label: "美团配送"
                },
                {
                    value: "2",
                    label: "点我达配送"
                },
                {
                    value: "4",
                    label: "达达配送"
                },
                {
                    value: "6",
                    label: "蜂鸟配送"
                }
            ], //承运商下拉框数据
            //表格数据
            tableData: [], //表格信息
            total: null, //表格总条数
            loading: false //表格加载动画
        };
    },
    created() {
        //初始化操作时间
        this.getTodayTimeSection();
        //初始化表格数据
        this._queryHorsemanDeliveryDataInfo();
    },
    methods: {
        /*----------------------------计算当天的开始时间和结束时间----------------------------*/
        getTodayTimeSection() {
            var datesection = this.UTILS.getTodayStartAndEndDate();
            this.formData.beginTime = datesection.beginTime;
            this.formData.endTime = datesection.endTime;
        },

        /*----------------------------查询操作----------------------------*/
        //查询骑手派单数据信息表格数据
        _queryHorsemanDeliveryDataInfo() {
            this.loading = true;
            queryHorsemanDeliveryDataInfo(this.formData)
                .then(res => {
                    this.loading = false;
                    this.tableData = res.list;
                    this.total = res.totalCount;
                })
                .catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                });
        },
        //页码切换
        handleCurrentChange(val) {
            this.formData.pageNum = val;
            this._queryHorsemanDeliveryDataInfo();
        },
        //每页展示条数的切换
        handleSizeChange(val) {
            this.formData.pageSize = val;
            this._queryHorsemanDeliveryDataInfo();
        },
        //点击查询
        handleSearch() {
            this.formData.pageNum = 1;
            this.formData.pageSize = 10;
            this._queryHorsemanDeliveryDataInfo();
        },
        //点击清空
        handleClear() {
            this.formData = {
                storeName: "",
                courier: "",
                deliverytype: "",
                beginTime: "",
                endTime: "",
                pageNum: 1,
                pageSize: 10
            };
            this.$message({
                type: "success",
                message: "清空成功!"
            });
            this.getTodayTimeSection();
            this._queryHorsemanDeliveryDataInfo();
        },

        /*----------------------------导出操作----------------------------*/
        handleExport() {
            var obj = {
                storeName: this.formData.storeName,
                courier: this.formData.courier,
                deliverytype: this.formData.deliverytype,
                beginTime: this.formData.beginTime,
                endTime: this.formData.endTime
            };
            this.UTILS.exportUtil(api.exportHorsemanDeliveryDataInfo, obj);
        },

        /*----------------------------时间转换操作----------------------------*/
        timeTransform(timeNum) {
            var mss = Math.abs(timeNum);
            var days = parseInt(mss / (60 * 24));
            var hours = parseInt((mss % (60 * 24)) / 60);
            var minutes = parseInt(mss % 60);
            if (days > 0) {
                return days + " d " + hours + " h " + minutes + " m ";
            } else if (hours > 0) {
                return hours + " h " + minutes + " m ";
            } else {
                return minutes + " m ";
            }
        }
    },
    components: {
        "m-pagination": mPagination
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>